<div class="drawer-menu">
  <div class="top">
    <div class="title">
      <div>{{ operate }}</div>
    </div>
  </div>
  <div class="mainContent">
    <form dForm ngForm [layout]="layoutDirection" (dSubmit)="submitForm($event)">
      <div class="operationForm" [ngModelGroup]="'operationForm'">
        <d-form-item class="collectionForm">
          <d-form-label class="collectionForm" [required]="true">集合名称</d-form-label>
          <d-form-control>
            <input dTextInput autocomplete="off" name="collectionName" placeholder="请输入集合名称"
              [(ngModel)]="collection.collectionName" [ngModelOptions]="{ updateOn: 'blur' }"
              (ngModelChange)="formChangeName()" [dValidateRules]="formRules.nameRules"
              [disabled]="subCollectionIndex != 0 || operate == '发布'" />
          </d-form-control>
        </d-form-item>
        <div class="collectionMessage">
          <div class="message" *ngIf="subCollectionIndex != 0">
            <label class="messageTitle">藏品信息</label>
            <div class="description">{{ collectionDetail.children[0].description }}</div>
          </div>
          <div class="container" *ngFor="let item of collectionDetail.children">
            <div class="picture">
              <img *ngIf="item.pictureUrl" [src]="item.pictureUrl" style="border: none; width: 144px; height: 144px" />
            </div>
            <div class="introduction">
              <div class="content">
                图片名称：{{ item.pictureName }}
              </div>
              <div class="content">
                藏品作者：{{ item.author }}
              </div>
              <div class="content">藏品分类：{{ item.type }}</div>
              <div class="content">
                铸造数量：{{ item.supplies }}
              </div>
            </div>
          </div>
        </div>
        <div class="publishOperation">
          <d-form-item>
            <d-form-label [ngClass]="isRequired ? 'saleTimeFormRequired' : 'saleTimeForm'" [required]="isRequired">
              发售开始时间</d-form-label>
            <d-form-control>
              <d-datepicker-pro name="startTime" [format]="'y-MM-dd HH:mm:ss'" dValidateSyncKey="saleTime"
                [dValidateRules]="
                  isRequired
                    ? formRulesRequired.saleTimeRules
                    : formRules.saleTimeRules
                " [appendToBody]="false" [(ngModel)]="saleTime" [minDate]="minStartDate" [maxDate]="maxStartDate"
                [showTime]="true" [autoOpen]="false" (ngModelChange)="formChangeSaleTime()">
              </d-datepicker-pro>
            </d-form-control>
          </d-form-item>
          <d-form-item>
            <d-form-label [ngClass]="
                isRequired ? 'offShelfTimeFormRequired' : 'offShelfTimeForm'
              " [required]="isRequired">发售结束时间</d-form-label>
            <d-form-control>
              <d-datepicker-pro name="endTime" [format]="'y-MM-dd HH:mm:ss'" dValidateSyncKey="saleTime"
                [dValidateRules]="
                  isRequired
                    ? formRulesRequired.offShelfTimeRules
                    : formRules.offShelfTimeRules
                " [appendToBody]="false" [(ngModel)]="offShelfTime" [minDate]="minEndDate" [maxDate]="maxEndDate"
                [showTime]="true" [autoOpen]="false" (ngModelChange)="formChangeOffShelfTime()">
              </d-datepicker-pro>
            </d-form-control>
          </d-form-item>
          <d-form-item>
            <d-form-label [ngClass]="isRequired ? 'priceFormRequired' : 'priceForm'" [required]="isRequired">价格
            </d-form-label>
            <d-form-control [suffixTemplate]="suffixTemplate1">
              <input class="price" dTextInput autocomplete="off" name="price" placeholder=" 请输入价格" [(ngModel)]="price"
                [ngModelOptions]="{ updateOn: 'blur' }" (ngModelChange)="formChangePrice()" [dValidateRules]="
                  isRequired
                    ? priceRulesRequired.priceRules
                    : formRules.priceRules
                " />
              <ng-template #suffixTemplate1>
                <i [ngClass]="price ? 'priceExist' : 'priceNotExist'">￥</i>
              </ng-template>
            </d-form-control>
          </d-form-item>
        </div>
        <div style="height: 36px"></div>
      </div>
      <d-form-operation>
        <div class="footer">
          <button class="save" dFormSubmit [dFormSubmitData]="isRequired ? 'publish' : 'save'">
            {{ operateShow }}
          </button>
          <button class="cancel" dFormSubmit [dFormSubmitData]="'cancel'">
            取消
          </button>
        </div>
      </d-form-operation>
    </form>
  </div>
</div>
